<template>
  <div class="nav">
    <div class="right">
      <div class="top">
        <img src="../assets/images2/8.jpg" alt="" />
        <div class="top-center" >
          <span class="hop">体检指南</span>

          <span class="block">体检宝典</span>
          <div class="min-more">更多</div>
        </div>
      </div>
      <div class="min-center">
        <img src="../assets/images2/9.jpg" alt=""/>
      </div>
      <div class="bottom">
        <ul >
          <li v-for="lis of guide">{{lis.dec}}</li>
        </ul>
      </div>
    </div>
    <div class="center">
      <div class="top">
        <img src="../assets/images2/five.png" alt="" />
        <div class="top-center" >
          <span class="hop">健康一周烩</span>
          <span class="block">专题区</span>
          <div class="min-more">更多</div>
        </div>
      </div>
      <div class="min-center">
          <img src="../assets/images2/5.jpg" alt=""/>
      </div>
      <div class="bottom">
        <ul >
          <li v-for="lisd of topic">{{lisd.dec}}</li>
        </ul>
      </div>
    </div>
    <div class="left">
      <div class="top">
        <img src="../assets/images2/xinx.png" alt="" />
        <div class="top-center" >
          <span class="hop">体检项目知识</span>
          <span class="block">知识库</span>
          <div class="min-more">更多</div>
        </div>
      </div>
      <div class="min-center">
        <img src="../assets/images2/5.jpg" alt=""/>
      </div>
      <div class="bottom">
        <div class="bottom-left">
          <ul v-for="(key,index) in list">

              <li     :class="{'thi':isclass[index]}" @click="handleC(index)">{{key}}</li>
          </ul>
        </div>
        <div class="bottom-right">
          <div class="min-wrapper" v-if="indexaaaa==0">[乙肝两对半]  [乙肝两对半] [乙肝两对半]  [乙肝两对半] [乙肝两对半]  [乙肝两对半]  [乙肝两对半]  [乙肝两对半]  [乙肝两对半]  [乙肝两对半]
             [乙肝两对半]</div>
          <div class="min-wrapper" v-else-if="indexaaaa==1">啥也没有</div>
          <div class="min-wrapper" v-else-if="indexaaaa==2">别点了</div>
          <div class="min-wrapper" v-else-if="indexaaaa==3">没救了</div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'VHcenter',
    data () {
      return {
        guide:[{
          dec:'· 中国人五大减原因，每个都离你很近！'
        },{
          dec:'· 这样揉耳朵，等于给全身做了一套“养生操”'
        },{
          dec:'· 胃总是不舒服，需要做胃镜吗？'
        },{
          dec:'· 小年遇大寒，这些事一定要做！'
        },{
          dec:'· 失眠，打死都睡不着？3个方法让你一夜好眠噢噢噢噢'
        },{
          dec:'· 最新“膝盖使用说明书”，现在知道还不晚！'
        },{
          dec:'· 少吃糖就不会得糖尿病？治疗糖尿病，这3招就不告诉你哈哈哈哈哈哈哈哈哈'
        }
        ],
        topic:[{
          dec:'· 肾脏健康：养肾从这几方面入手'
        }, {
          dec: '· 保护听力，你该知道这些事'
        },{
          dec:'· 禽流感年年来犯，战"疫"关键不得不知'
        },{
          dec:'· 春季养肝正当时，不得不知的护肝知识'
        },{
          dec:'· 节后肠胃"调整"小妙招'
        },{
          dec:'· 春节健康宝典：快乐安康过大年'
        },{
          dec:'· 冬季感冒虽是"小病"，却不容忽视'
        }],
        list:['实验室检查','科室检查','医技检查','专科检查'],
        isclass: [true,false,false,false],
        indexaaaa:0,
      }
      },
    methods:{
        handleC:function(index){
          this.indexaaaa=index;
          var a=this.indexaaaa;
          for(var i=0; i<this.isclass.length; i++){
            this.isclass[i]=false;
            this.isclass[a]=true;

          }
          // console.log(this.isclass)
          }
        }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .block{
    display: block;
  }
.nav{
  width:80%;
  height: 470px;
  margin:0 auto;
  margin-top:40px;
  margin-bottom:40px;
  justify-content: space-between;
  display: flex;
}
  .right,
  .center,
  .left{
    width: 30.8%;
    height: 100%;
    float:left;
  }
  .top,
  .min-center,
  .bottom{
    width: 100%;
  }
  .right{
    border-right:1px solid rgba(241,241,241);
  }
  .center{
    border-right:1px solid rgba(241,241,241);
  }
  .top{
    height:21.2%;
    display: flex;
    position: relative;

  }
  .top-center{
    flex:1;
  }
  .top-center>span{
    color:rgba(222,222,222);
  }
  .top>img{
    height: 100%;
  }
  .min-center{
    height: 23.4%;
  }
  .min-center>img{
    height: 100%;
    width: 75%;
  }
  .bottom{
    height: 54.6%;
  }
.min-more{
  float:right;
  position: absolute;
  top:38px;
  right: 0;
  margin-right:50px;
}
  .top-center .hop{
    font-size: 30px;
    color:rgba(158,158,158);
    margin-top:10px;
    display: inline-block;
  }
  ul{
    list-style:none;
    margin-top:30px;
  }
  ul>li{
    color:rgba(101,101,101);
    margin:9px 0px 0px 8px;
    width:65%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .center .min-center>img{
    width:380px;
  }
  .left .min-center>img{
    width:100%;
  }
  .left{
  }
  .bottom-left,
  .bottom-right{
    height: 100%;
    float:left;
    text-align: left;
    word-wrap: break-word;
    word-break: normal;

  }
  .bottom-left{
    width:28%;


  }
  .bottom-right{
    width:72%;
    height: 103%;


  }
  .bottom-left ul{
    margin-top:0;



  }
.bottom-left ul>li{
  display: block;
  margin:0 0 0 0;
  writing-mode:horizontal-tb;
  text-align: center;
  margin:0 auto;
  height: 25%;
  line-height: 65px;
  width:100%;
  border-bottom:1px dashed rgba(222,222,222);
  background:rgba(241,241,241);

}
.bottom-left ul>.thi{
    background:rgba(53,181,242);
    color:#fff;
  }
.min-wrapper{
  line-height: 44px;
  text-align: center;
  width: 62%;
  margin:0 auto;
  min-width:200px;
}



</style>
